<!--
* @name: 批量选择人员
* @author:张鹏程
* @CreateTime:2023-04-21
-->
<template>
  <base-dialog @handleConfirmClick="personConfirmClick" :dialogVisible.sync="personDialog" title="选择人员" width="1000px"
    top="5vh" :footerShow="true">
    <div style="height: 75vh; overflow: auto" v-loading="personLoading">
      <div v-for="(item, index) in dataList" :key="index" flex="cross:top" class="dataBox">
        <div flex="cross:center" class="department">
          <p style="width: 120px">{{ item.o_OrganName }}</p>
          <i class="el-icon-star-on star" :class="{ active: item.active }"></i>
        </div>
        <div flex="cross:center" flex-wrap style="flex: 1">
          <div v-for="(elItem, elIndex) in item.personList" :key="elIndex" class="personBox" @click="selectPerson(elItem)"
            :class="{ active: (elItem.p_PersonID == chooseData.p_PersonID) }">
            <p class="name">{{ elItem.p_PersonName }}</p>
            <p class="phone">{{ elItem.p_Telphone }}</p>
          </div>
        </div>
      </div>
    </div>
  </base-dialog>
</template>

<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import { PersonList } from "@/api/apis/personnelSettings";
import { GetOrganTree } from "@/api/apis/organization";
import { getCompanyId } from "@/utils/auth";
export default {
  components: {
    baseDialog,
  },
  // watch:{
  // 	selectedDataList:{
  // 		deep: true, //深度监听设置为 true
  // 		handler: function(newV, oldV) {
  // 			// newV.forEach(el=>{
  // 				this.dataList.forEach(el=>{
  // 					let personNum = 0
  // 					el.personList.forEach(personEl=>{
  // 						if(personEl.active){
  // 							personNum = personNum + 1
  // 						}
  // 					})
  // 					if(personNum == 0){
  // 						el.active = false
  // 					}else{
  // 						el.active = true
  // 					}
  // 				})
  // 			// })
  // 		}
  // 	},
  // 	dataList:{
  // 		deep: true, //深度监听设置为 true
  // 		handler: function(newV, oldV) {
  // 			let selectedDataList = []
  // 			newV.forEach(el=>{
  // 				el.personList.forEach(item =>{
  // 					if(item.active){
  // 						selectedDataList.push(item)
  // 					}
  // 				})
  // 			})
  // 			this.selectedDataList = selectedDataList
  // 		}
  // 	}
  // },
  data() {
    return {
      personDialog: false,
      dataList: [],
      selectedDataList: [],
      personLoading: false,
      chooseData: {},
    };
  },
  methods: {
    // 打开弹窗
    openDialog(selectedDataList = [], type) {
      this.personDialog = true;
      this.selectedDataList = [];
      this.getMenuData(selectedDataList);
    },
    // 人员确定
    personConfirmClick() {
      if (JSON.stringify(this.chooseData) == "{}") {
        this.$message({
          message: `请选择人员`,
          type: 'warning'
        });
        return
      }
      this.$emit("personConfirmClick", this.chooseData);
      this.personDialog = false;
    },
    // 获得组织图
    async getMenuData(selectedDataList) {
      this.personLoading = true;
      setTimeout(() => {
        this.personLoading = false;
      }, 5000);
      let params = {
        // CompanyID: 1
        companyID: this.$store.state.user.companyID
          ? this.$store.state.user.companyID
          : getCompanyId(),
      };

      let res = await GetOrganTree(params);
      let dataList = JSON.parse(res.data[0]);
      let departmentList = [];
      function setDepartmentList(data) {
        data.forEach((item) => {
          let arr = {
            o_OrganName: item.label,
            personList: [],
            active: false,
          };
          departmentList.push(arr);
          if (item.children && item.children.length > 0) {
            setDepartmentList(item.children);
          }
        });
      }
      setDepartmentList(dataList);
      this.getPersonList(departmentList, selectedDataList);
      // let organMenuData = JSON.parse(res.data[0]);
    },
    // 获得人员列表
    async getPersonList(departmentList, selectedDataList) {
      let params = {
        page: "1",
        limit: "999",
        departmentID: "",
      };
      let res = await PersonList(params);
      console.log(res, "peores");
      if (res.code === 1) {
        departmentList.forEach((el) => {
          res.data[1].forEach((item) => {
            if (el.o_OrganName == item.o_OrganName) {
              let personArr = {
                o_OrganName: item.o_OrganName,
                p_PersonName: item.p_PersonName,
                p_Telphone: item.p_Telphone,
                p_PersonID: item.p_PersonID,
                active: false,
              };
              el.personList.push(personArr);
            }
          });
        });
        this.dataList = departmentList;
        this.dataList.forEach((el) => {
          el.personList.forEach((elItem) => {
            selectedDataList.forEach((item) => {
              if (item.p_PersonID == elItem.p_PersonID) {
                elItem.active = true;
                this.selectedDataList.push(elItem);
              }
            });
          });
        });
        this.personLoading = false;
      }
    },
    selectPerson(val) {
      this.chooseData = val;
      // this.selectedDataList.forEach((el, index) => {
      // 	if (el.p_PersonID == val.p_PersonID) {
      // 		personActive = true
      // 		this.selectedDataList.splice(index, 1)
      // 	}
      // })
      // if (!personActive) {
      // 	this.selectedDataList.push(val)
      // }
    },
    // 全选
    // selectAll(item){
    // 	item.active = !item.active
    // 	// if(item.active){
    // 		item.personList.forEach(el=>{
    // 			el.active = item.active
    // 		})
    // 	// }
    // }
  },
};
</script>

<style scoped lang="scss">
$activeColor: var(--bg-color, "#00aaff");

.dataBox {
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
  min-height: 50px;
}

.personBox {
  border-radius: 3px;
  text-align: center;
  background-color: #f0f0f0;
  color: #817582;
  padding: 10px 0;
  cursor: pointer;
  // width: 100px;
  min-width: 100px;

  // margin-bottom: 10px;
  .name {}

  .phone {
    font-size: 12px;
    margin-top: 5px;
  }
}

// .personBox+.personBox {
//   margin-left: 10px;
// }

// .personBox:nth-of-type(8n + 0) {
//   margin-left: 0;
// }
.personBox {
  margin-right: 10px;
  margin-bottom: 5px;
}

// .personBox:nth-child(n + 8) {
//   margin-top: 10px;
// }

.personBox.active {
  color: #fff;
  background-color: $activeColor;
}

.department {
  font-size: 14px;
  text-align: center;
  margin-right: 10px;

  .el-icon-star-on {
    font-size: 26px;
    color: #f0f0f0;
  }
}

.el-icon-star-on.active {
  color: $activeColor;
}
</style>
